 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 @media screen and (max-width: 320px) {
    html {
        font-size: 42px !important;
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size: 100px !important;
    }
}
 li{
     list-style: none;
 }
 a{
     text-decoration: none;
 }
 header{
     position: fixed;
     background-color: #f5f5f5f5;
     border-color: #ddd;
     color: #444;
     display: flex;
     justify-content:space-between;
     top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    width: 100%;
 }
 .header-one,.header-two{
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 0;
    z-index: 2;
 }
 header .header-one{
     position: relative;
     margin: .1rem .2rem;
     width: 70%;
 }
 header .header-one>input{
    position: relative;
     height: .6rem;
     width: 100%;
     padding-left: .5rem;
     border-radius: 5px;
     border: 1px solid #ddd;
 }
 header .header-one>input::placeholder{
     font-size: .24rem;
 }
 header .header-one>.fa-search{
    top: .16rem;
    left: .1rem;
     position: absolute;
     z-index: 100;
     font-size: .32rem;
 }
 .header-two>div{
     width: .8rem;
     height: .86rem;
 }
 .header-two>div>.fa-times{
    color: #fe5b4a!important;
    font-size: .35rem;
    /* visibility: hidden; */
    opacity: 0;
    transition: all .5s ease;
 }
 .header-two .fa-ellipsis-h,
 .header-two .fa-times{
     position: absolute;
     right: .34rem;
    top: .24rem;
    font-size: .4rem;
 }
 .header-two>div{
    position: relative;
 }
 .header-two>div>i{
     font-size: .36rem;
 }
 .header-two .drop-down.down-show{
     visibility: inherit;
     height: 1.2rem;
 }
 .header-two .drop-down{
    position: absolute;
    width: 100%;
    top: .8rem;
    left: 0;
    right: 0;
    height: 0;
    visibility: hidden;
    transition: all .2s linear;
    border-bottom: .04rem solid #fe8477;
    box-sizing: border-box;
 }
 .drop-down>ul{
    padding: .18rem 0;
    color: #fff;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
    /* position: absolute; */
 }
 .drop-down>ul>li{
    flex: 1;
    align-self: center;
    width: 0;
    text-align: center;
 }
 .drop-down>ul>li>a{
     color: #fff;
 }
 .drop-down li>a>i{
     font-size: .4rem;
     line-height: 1;
    vertical-align: middle;
 }
 .drop-down li>a>p{ 
    font-size: .24rem;
 }
 .drop-down::before{
    content: "";
    position: absolute;
    top: -5px;
    right: .3rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px;
    border-color: transparent transparent rgba(0,0,0,.8);
 }
 /* header */
 .classify{
    width: 2rem;
    position: fixed;
    top: 0.88rem;
    bottom: 0;
    z-index: 10;
    overflow: auto;
 }
 .classify::-webkit-scrollbar{
    display: none;
 }
 
 .classify .class-list>li{
    line-height: 0.88rem;
    font-size: 0.28rem;
    color: #333;
    text-align: center;
    border-left: 5px solid #eee !important;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #eee;
    width: 100%;
}
.classify .class-list .active{
    border-left: 5px solid #fe5b4a !important;
    border-right: 1px solid #fff;
    background-color: #fff;
}
.classify-content{
    position: absolute;
    left: 2rem;
    right: 0;
    bottom: 0;
    top: 0.88rem;
    z-index: 9;
    background-color: #fff;
}
.classify-content::-webkit-scrollbar{
    display: none;
}
.li-item{
    padding: 0.2rem;
}
.li-item .li-head{
    color: #999;
    font-size: 0.24rem;
    border-left: 2px solid #fe5b4a;
    padding-left: 0.1rem;
    line-height: 1;
}
.li-item .classify-wrap{
    width: 100%;
}
.classify-wrap ul{
    font-size: 0;
    overflow: hidden;
    margin-left: -0.2rem;
}
.classify-wrap ul .goods-box{
    background: #fff;
    font-size: 0.28rem;
    margin-top: 0.2rem;
    padding-left: 0.2rem;
    display: inline-block;
    margin-bottom: 0.2rem;
    width: 33.33333%;
    vertical-align: top;
}
.lazy-box{
    /* position: relative; */
    background-color: #fff;
}
.lazy-box .square-lazy{
    width: 100%!important;
    /* position: absolute; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    height: auto;
}
.li-item .goods-box .lazy-name{
    font-size: 0.24rem;
    color: #666;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
